<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="./lib/vue.js"></script>
        <title>04 vue事件修饰符</title>
    </head>
    <body>
        <div id="app">
            <!-- .self事件修饰符判断是否自己触发事件，如果是自己则触发事件 -->
            <ul @click.self="handleULClick()">
                <!-- .stop事件修饰符阻止事件冒泡触发 -->
                <li @click.stop="handleLIClick($event)">1111</li>
                <li @click="handleLIClick($event)">2222</li>
                <!-- .once事件修饰符只触发一次事件后就解绑事件 -->
                <li @click.once="handleLIClick($event)">3333</li>
            </ul>

            <br />
            <hr />
            <br />

            <!-- .prevent事件修饰符阻止默认事件触发 -->
            <a href="http://www.baidu.com" @click.prevent="handleGoto($event)">
                goto baidu
            </a>

            <br />
            <hr />
            <br />

            <!-- .enter事件修饰符表示键盘回车，也可以成键位数字13 -->
            回车触发事件：
            <input type="text" @keyup.enter="handleKeyup" />
        </div>

        <script>
            const vm = new Vue({
                el: '#app',
                methods: {
                    handleLIClick(event) {
                        // event.stopPropagation(); //阻止事件冒泡触发
                        console.log('li click');
                    },
                    handleULClick() {
                        console.log('ul click');
                    },
                    handleGoto(event) {
                        // event.preventDefault(); //取消默认事件触发
                        console.log('a click');
                    },
                    handleKeyup(event) {
                        // if (event.keyCode === 13) {
                        //     console.log('回车触发方法');
                        // }
                        console.log('回车触发方法');
                    }
                }
            });
        </script>
    </body>
</html>
